﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- styling -->
    <style>
    /* root element for scrollable */
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;

	/* vertical scrollables have typically larger height than width but not now */
	height: 200px;
	width: 300px;
	background-color: Aqua;
}

/* root element for scrollable items */
.scrollable .items {
	position:absolute;

	/* this time we have very large space for the height */
	height:200px;
}
a.x
{
    font-family: Tahoma;
    font-size: 9pt;
}
#tem
{
    visibility:hidden;
}
        #te2
        {
            height: 265px;
            width: 376px;
        }
    </style>
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script>
    <script src="/Scripts/jquery-jtemplates.js" type="text/javascript"></script>
</head>
<body>
    <!-- HTML structures -->
    <div id="actions">
        <a class="prev">&laquo; Back</a> <a class="next">Forward &raquo;</a>
    </div>
    <!-- root element for scrollable -->
    <div class="scrollable vertical">
        <!-- root element for the items -->
        <div class="items" id="result" >
         
        </div>
    </div>
    
    <textarea id="tem">

{#for k = 0 to 5}
    <div>
    {#for i = 0 to 9}
        <div class="item" >
            {#for j = 1 to 10}
                <a href="#" onclick="gopage(this.id);" class="x" id='{$T.k*100 + $T.i * 10 + $T.j}'>{$T.k*100 + $T.i * 10 + $T.j}</a>
            {#/for}
        </div>
    {#/for}
    </div>
{#/for}
    <div>
        <div class="item">
            {#for j = 1 to 4}
                <a href="#" onclick="gopage(this.id);" class="x" id='{600 + $T.j}'>{600 + $T.j}</a>
            {#/for}
        </div>
    </div>
    </textarea>

    <textarea id="tem2">
    {#for index = 0 to 11}
        <div class="item" >
        {#foreach $T.table as record begin=$T.index*10 count=10}
		<div>
			<span>{$T.record.id}</span>
			<a href="/pages/{$T.record.from}" onclick="gopage({$T.record.from});">{$T.record.name}</a>
			<span>{$T.record.from},{$T.record.to}</span>
			
		</div>
		{#/for}
        </div>
    {#/for}
    </textarea>
    <script src="http://localhost:4987/Scripts/sura.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function () {

            // initialize scrollable with mousewheel support
            $(".scrollable").scrollable({ vertical: true, mousewheel: true });

         
            $("#result").setTemplate($("#tem2").val());
            $("#result").processTemplate(suradata);


        });

        function gopage(pageid) {
            alert(pageid);
        }
       
    </script>
</body>
</html>